<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>焦点学苑</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/style.css">

<!-- vue -->
<script type="text/javascript" src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
<!-- axios -->
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<!-- 引入控件 -->
<script src="js/top.js"></script>
<script src="js/category.js"></script>
</head>

<body>
<div class="head-box" id = "login-btm">
    <div class="head wrap" >
          <div class="logo fl"><a href=""><img src="images/logo.png"></a></div>
          <div class="head-right fr">
             <!--  <div class="head-a fr">
                   <div class="hgt fl"><img src="images/hgt.png">
                         <div class="hgt-top">
                             <input type="text" class="hgt-text">
                         </div>
                   </div>
                   <div class="head-a1 fl"><a href=""><img src="images/tb-a.png"></a></div>
                   <div class="head-a1 fl"><a href=""><img src="images/tb-b.png"></a></div>
                   <div class="head-a3 login-click fl">登录</div>
                   <div class="head-a4 reg-click fl">注册</div>
              
              </div> -->
              <top></top>
              
              <div class="clearfix"></div>
              <div class="nav fr">
                  <ul>
                       <li><a href="index.html">首页</a></li>
                       <li><a href="">文章</a>
                           <category></category>
                       </li>
                       <li><a href="community.html">社区</a></li>
                       <li class="nav-cut"><a href="course.html">课程</a></li>
                       <li><a href="active.html">活动</a></li>
                       <li><a href="contact.html">联系我们</a></li>
                  
                  </ul>
              </div>
              <div class="clearfix"></div>
          </div>
    </div>
</div>
<script>
              var v3 = new Vue({
            	  el:"#login-btm",
              });
              </script>
<div class="content">
    <div class="wrap">
           <div class="tsm-height"></div>
           <div class="course-banner"><img src="upload/course-banner.jpg"></div>
           <div class="cou-a">
                <ul>
                      <li><div class="cou-a1"><img src="upload/course-a2.jpg">
                                              <div class="cou-inside"><div class="cou-href"><a href="">查看</a></div></div>
                           </div>                   
                          <div class="act-a2">活动主题</div>
                      </li>
                      
                      <li><div class="cou-a1"><img src="upload/course-a1.jpg">
                                              <div class="cou-inside"><div class="cou-href"><a href="">查看</a></div></div>
                           </div>                   
                          <div class="act-a2">活动主题</div>
                      </li>
                      
                      <li><div class="cou-a1"><img src="upload/course-a2.jpg">
                                              <div class="cou-inside"><div class="cou-href"><a href="">查看</a></div></div>
                           </div>                   
                          <div class="act-a2">活动主题</div>
                      </li>
                </ul>         
           </div>
           
           <div class="cou-b">
                <div class="cou-b-title">
                     <div class="cou-b1"><img src="images/cou-b1.jpg">课程</div>
                     <div class="cou-b2">
                         <div class="sort">排序</div>
                     </div>
                     <div class="cou-b3">
                         <div class="dropdown">
                                 <span>所有课程</span>
                                 <ul data-value="" class="droplist">
                                            <li data-id="1">网络课程</li>
                                            <li data-id="2">线下课程</li>
                                            <li data-id="3">情感诊断</li>
                                            <li data-id="4">挽回爱情</li>
                                            <li data-id="5">长期关系</li>
                                            <li data-id="6">狙击真命</li>
                                            <li data-id="7">形象改造</li>
                                            <li data-id="8">如何聊天</li>
                                            <li data-id="9">官方课程</li>
                                 </ul>
                         </div>
                     </div>
                </div>
           </div>
           
           <div class="cou-c">
               <ul>
                   <li>
                       <div class="kil-fl fl"><img src="upload/cou-c.jpg"></div>
                       <div class="kil-fr fl">
                            <div class="kil-r1">教你如何一步步把妹子泡到手</div>
                            <div class="kil-r2">网络课程<span>情感诊断</span><span>官方课程</span></div>
                            <div class="kil-r3">¥ 199.00~1899.00</div>
                            <div class="kil-r4"><img src="upload/cou-d.jpg">1380 人在学</div>
                       
                       </div>
                   </li>
                   
                   <li>
                       <div class="kil-fl fl"><img src="upload/cou-c.jpg"></div>
                       <div class="kil-fr fl">
                            <div class="kil-r1">教你如何一步步把妹子泡到手</div>
                            <div class="kil-r2">网络课程<span>情感诊断</span><span>官方课程</span></div>
                            <div class="kil-r3">¥ 199.00~1899.00</div>
                            <div class="kil-r4"><img src="upload/cou-d.jpg">1380 人在学</div>
                       
                       </div>
                   </li>
                   
                   <li>
                       <div class="kil-fl fl"><img src="upload/cou-c.jpg"></div>
                       <div class="kil-fr fl">
                            <div class="kil-r1">教你如何一步步把妹子泡到手</div>
                            <div class="kil-r2">网络课程<span>情感诊断</span><span>官方课程</span></div>
                            <div class="kil-r3">¥ 199.00~1899.00</div>
                            <div class="kil-r4"><img src="upload/cou-d.jpg">1380 人在学</div>
                       
                       </div>
                   </li>
                   
                   <li>
                       <div class="kil-fl fl"><img src="upload/cou-c.jpg"></div>
                       <div class="kil-fr fl">
                            <div class="kil-r1">教你如何一步步把妹子泡到手</div>
                            <div class="kil-r2">网络课程<span>情感诊断</span><span>官方课程</span></div>
                            <div class="kil-r3">¥ 199.00~1899.00</div>
                            <div class="kil-r4"><img src="upload/cou-d.jpg">1380 人在学</div>
                       
                       </div>
                   </li>
                   
                   <li>
                       <div class="kil-fl fl"><img src="upload/cou-c.jpg"></div>
                       <div class="kil-fr fl">
                            <div class="kil-r1">教你如何一步步把妹子泡到手</div>
                            <div class="kil-r2">网络课程<span>情感诊断</span><span>官方课程</span></div>
                            <div class="kil-r3">¥ 199.00~1899.00</div>
                            <div class="kil-r4"><img src="upload/cou-d.jpg">1380 人在学</div>
                       
                       </div>
                   </li>
                
               </ul>
           </div>
           
          
           
            <div class="page m-48">
                         <a href="" class="page-cut">1</a>
                         <a href="">2</a>
                         <a href="">》</a>
            </div>
            
            <div class="act-e"><a href=""><img src="upload/act-f.jpg"></a></div>
    </div> 
</div>

<div class="footer">
   <div class="wrap">
      <div class="foot">
            <div class="foot-left fl">
                 <a href="">关于我们</a>
                 <a href="">加入我们</a>
                 <a href="contact.html">联系我们</a>
                 <a href="">媒体采访</a>
            </div>
            <div class="foot-c fl"><a href=""><img src="images/foot-logo.jpg"></a></div>
            <div class="foot-right fr">
                 <a href="">同城活动</a>
                 <a href="">课程资讯</a>
                 <a href="">最新发布</a>
                 <a href="">热门文章</a>
            </div>
       </div> 
       <div class="foot-btm">网页制作by云邦</div>    
   </div>
</div>


<!--登录注册弹窗-->
<div class="mask"></div>
<div class="login" id="login1">
    <div class="login-title">
        <div class="login-a">登录</div>
        <div class="login-b"></div>
        <div class="login-c close">x</div>
    </div>
    <div class="login-btm">
        <div class="login-d"><input v-model="user.uname" type="text" class="login-text" placeholder="用户名"></div>
        <div class="login-d"><input v-model="user.upass" type="password" class="login-pas" placeholder="密码"></div>
        <div class="login-d"><input @click.prevent="login" type="button" class="login-btn" v-model:value="bname"></div>
        <div class="login-f">
             <a href="">忘记密码</a>
             <span>还没有焦点账号?><a href="javascript:;" class="reg-href">点击注册</a></span>
        </div>
    </div>
</div>
<script>
var v5  = new Vue({
	el:"#login1",
	data : {
		user : { uname: "",upass:"" },
		bname:"登录",
	},
	
	methods:{
		
		login(){
			console.info("sss");
			var params = new URLSearchParams();
			params.append("username",this.user.uname);
			params.append("password",this.user.upass);
			
			axios.post("user/login.s",params).then(res=>{
				
				/* 	code 0 1
					msg 
					data  */
				
				 if(res.data.code){
					//关闭div
					$(".mask,.login").css("display", "none");
					//隐藏“登录”div
					$("#loginAndUser").hide();
					//显示用户名div
					$("#uname").show();
					//用户名文本对应
					$("#uname").text(this.user.uname);
					//隐藏“注册”div
					$("#newUser").hide();
				}else{
					$("#loginAndUser").show();
					$("#uname").hide();
					alert(res.data.msg);
				} 
				
			})
		}
	}
});
</script>
<div class="reg" id="regist">
    <div class="login-title">
        <div class="login-a">注册</div>
        <div class="login-b"></div>
        <div class="login-c close">x</div>
    </div>
    <div class="login-btm">
        <div class="login-d"><input v-model="user.uname" type="text" class="login-text" placeholder="用户名"></div>
        <div class="login-d"><input v-model="user.upass" type="password" class="login-pas" placeholder="密码"></div>
        <div class="login-d"><input @click.prevent="regist" type="button" class="login-btn" value="注册"></div>
        <div class="login-f">
             <a href="">忘记密码</a>
        </div>
    </div>
</div>
	<script>
var v6 =new Vue({
	el:"#regist",
	data:{
		user:{uname:"",upass:""},
		bname:"注册",
	},
	methods:{
		regist(){
			var params = new URLSearchParams();
			params.append("username",this.user.uname);
			params.append("password",this.user.upass);
			
			axios.post("user/regist.s",params).then(res=>{
				//??怎么判断成功  res.data.code的含义
				if(res.data.code){
					alert("注册成功");
					$(".mask,.reg").css("display", "none");
				}else{
					alert(res.data.msg);
				}
			})
		}
	}
});

</script>

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/Action.js"></script>
<script>
$(".cou-a1").hover(function(){
		$(this).find(".cou-inside").stop(true,true).animate({top:0},500);
		},function(){
	        $(this).find(".cou-inside").stop(true,true).animate({top:201},500);
		});	
</script>
<script>
   $(".sort").click(function(){
	   $(this).toggleClass("sort-cut")  
	})
</script>
<script>
  $(".page a").click(function(){
	  $(this).addClass("page-cut").siblings().removeClass("page-cut")  
	  
	})
</script>

<script>
   $(".dropdown").bind({
	    click: function () {
	        $(this).find(".droplist").stop().slideDown();
	    },
	    mouseleave: function () {
	        $(this).find(".droplist").hide();
	    }
	});
	$(".dropdown .droplist li").click(function () {
	    $(this).parents(".dropdown").children("span").text($(this).text());
	    $(this).parents(".droplist").hide().attr("data-value", $(this).attr("data-id"));
	});
</script>
</body>
</html>
